<template>
  <div id="reg_ret_box">
    <div class="form-container">
      <!-- 选择表单类型 -->
      <div class="form-selector">
        <button
          v-for="form in formConfig"
          :key="form.type"
          :class="['selector-btn', { active: selectedForm === form.type }]"
          @click="switchForm(form.type)"
        >
          {{ form.label }}
        </button>
      </div>

      <!-- 动态渲染表单 -->
      <div v-for="form in formConfig" :key="form.type">
        <div v-if="selectedForm === form.type" class="dynamic-form">
          <h2>{{ form.label }}</h2>
          <div v-for="field in form.fields" :key="field.id" class="form-group">
            <label :for="field.id">{{ field.label }}</label>
            <input
              :type="field.type"
              :id="field.id"
              v-model="formData[field.id]"
              :placeholder="field.placeholder"
              :autocomplete="field.autocomplete || 'off'"
            />
          </div>
          <button class="submit-btn" @click="handleSubmit(form.type)">
            提交
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { success, warning } from '../../static/js/alert.js';
import { resetac, create_ac } from '../../api/user.js';

const Router = useRouter();

// 定义 props
const props = defineProps({
  formConfig: {
    type: Array,
    required: true,
    default: () => [
      {
        type: 'register',
        label: '注册',
        fields: [
          { id: 'username', label: '用户名', type: 'text', placeholder: '请输入用户名', autocomplete: 'off' },
          { id: 'password', label: '密码', type: 'password', placeholder: '请输入密码', autocomplete: 'off' },
          { id: 'confirmPassword', label: '确认密码', type: 'password', placeholder: '请再次输入密码', autocomplete: 'off' },
          { id: 'email', label: '邮箱', type: 'email', placeholder: '请输入邮箱', autocomplete: 'off' },
        ],
      },
      {
        type: 'forgotPassword',
        label: '找回密码',
        fields: [
          { id: 'username', label: '账户', type: 'text', placeholder: '请输入要找回的账号', autocomplete: 'off' },
          { id: 'email', label: '邮箱', type: 'email', placeholder: '请输入注册邮箱', autocomplete: 'off' },
          { id: 'verificationCode', label: '验证码', type: 'text', placeholder: '请输入验证码', autocomplete: 'off' },
          { id: 'newPassword', label: '新密码', type: 'password', placeholder: '请输入新密码', autocomplete: 'off' },
          { id: 'confirmNewPassword', label: '确认新密码', type: 'password', placeholder: '请再次输入新密码', autocomplete: 'off' },
        ],
      },
    ],
  },
});

// 当前选择的表单类型
const selectedForm = ref(props.formConfig[0].type);

// 表单数据
const formData = reactive({});

// 初始化表单数据
props.formConfig.forEach((form) => {
  form.fields.forEach((field) => {
    formData[field.id] = '';
  });
});

// 切换表单类型
const switchForm = (formType) => {
  selectedForm.value = formType;
  resetFormData();
};

// 重置表单数据
const resetFormData = () => {
  Object.keys(formData).forEach((key) => {
    formData[key] = '';
  });
};

// 处理表单提交
const handleSubmit = async (formType) => {
  const form = props.formConfig.find((form) => form.type === formType);

  // 检查必填字段
  for (const field of form.fields) {
    if (!formData[field.id]) {
      warning(`请填写 ${field.label}`);
      return;
    }
  }

  // 处理注册表单
  if (formType === 'register') {
    if (formData.password !== formData.confirmPassword) {
      warning('两次输入的密码不一致');
      return;
    }
    const judge = await create_ac(formData.username, formData.password);
    if (judge === 1) {
      success(`您的账户是: ${formData.username}\n您的密码是: ${formData.password}`);
      Router.push({
        name: 'index',
        params: {
          username: formData.username,
          password: formData.password,
        },
      });
    }
  }

  // 处理找回密码表单
  if (formType === 'forgotPassword') {
    if (formData.newPassword !== formData.confirmNewPassword) {
      warning('两次输入的密码不一致');
      return;
    }
    const judge = await resetac(formData.username, formData.newPassword);
    if (judge === 1) {
      success('密码重置成功');
    }
  }
};
</script>
<style scoped>
#reg_ret_box {
  background-image: url("../../public/about1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  margin-top: -200px; /* 你可以根据需要调整这个值 */
}

.form-selector {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.selector-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.selector-btn.active {
  background-color: #6a11cb;
  color: white;
}

.selector-btn:hover {
  background-color: #ddd;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #555;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  background-color: #6a11cb;
  color: white;
  margin-bottom: 10px;
}

.submit-btn:hover {
  background-color: #2575fc;
}
</style>
<!-- 示例
<template>
  <DynamicForm
    :form-config="[
      {
        type: 'register',
        label: '注册',
        fields: [
          { id: 'username', label: '用户名', type: 'text', placeholder: '请输入用户名' },
          { id: 'password', label: '密码', type: 'password', placeholder: '请输入密码' },
          { id: 'confirmPassword', label: '确认密码', type: 'password', placeholder: '请再次输入密码' },
          { id: 'email', label: '邮箱', type: 'email', placeholder: '请输入邮箱' },
        ],
      },
      {
        type: 'forgotPassword',
        label: '找回密码',
        fields: [
          { id: 'username', label: '账户', type: 'text', placeholder: '请输入要找回的账号' },
          { id: 'email', label: '邮箱', type: 'email', placeholder: '请输入注册邮箱' },
          { id: 'verificationCode', label: '验证码', type: 'text', placeholder: '请输入验证码' },
          { id: 'newPassword', label: '新密码', type: 'password', placeholder: '请输入新密码' },
          { id: 'confirmNewPassword', label: '确认新密码', type: 'password', placeholder: '请再次输入新密码' },
        ],
      },
    ]"
  />
</template>

<script setup>
import DynamicForm from './components/DynamicForm.vue';
</script> -->